One-handed mobile control #1011
Conversation
|
I was far too hasty on this one, on reflection I've noticed that this implementation on the player page literally only works if you don't have volume bars to play with; I only tested on a streamer thus far as that's what I have at my desk |
SteveMicroNova
force-pushed
the
BottomedControls
branch
from
ac0618a to
80579b8
Compare
SteveMicroNova
force-pushed
the
BottomedControls
branch
4 times, most recently
from
643dd17 to
9295e0f
Compare
|
Requesting Klayton and Lincoln as they've both had opinions along the way for this, requesting review from Jason as he requested this feature |
|
To my end, I have noticed that our unsafe volume sliders (that are very easy to bump and immediately set to max) are something of a hazard when you now have to scroll various nested dropdowns My current solution has been to limit the length of the volume bars so that there is ample thumb space for scrolling, as a long term goal I'd like to make the volume sliders are made safer from misinput. I've looked into this somewhat, my current thoughts are to either add a debounce or make it so you have to specifically click and drag the slider knob to change volume on mobile, but I'm undecided |
SteveMicroNova
force-pushed
the
BottomedControls
branch
6 times, most recently
from
7cc0796 to
58d21f4
Compare
| .background-gradient { | ||
| background: general.$bg-gradient; | ||
| position: fixed; | ||
| z-index: -1; | ||
| height: 100vh; | ||
| width: 100vw; | ||
| } |
There was a problem hiding this comment.
I had to remake how the gradient background worked, if you have enough zones when you use the dropdown on the player page you leave the gradient behind as you scroll at 100vh, and at 100% the gradient stretches weird
Now it stays the same no matter where you scroll
SteveMicroNova
force-pushed
the
BottomedControls
branch
2 times, most recently
from
a62b2b9 to
def1c5a
Compare
SteveMicroNova
force-pushed
the
BottomedControls
branch
5 times, most recently
from
865dd3c to
2dfde95
Compare
| @media (min-width: 365px) and (max-width: 425px) { | ||
| @media (min-width: 365px) and (max-width: 435px) { | ||
| font-size: 2.5rem; | ||
| } | ||
|
|
||
| @media (min-width: 425px) { | ||
| @media (min-width: 435px) { |
There was a problem hiding this comment.
I found a specific type of apple phone that needed to fit in this bucket, so I expanded the definition of this everywhere
There was a problem hiding this comment.
I ought to make this an scss var to avoid such wide-touching bucketing changes, but I'm uncertain I want to bloat this PR any more
If you want that change to make it into this one, say so; otherwise I will make another discreet PR shortly after this is merged.
SteveMicroNova
force-pushed
the
BottomedControls
branch
from
cdb10e4 to
1c52c1a
Compare
There was a problem hiding this comment.
Most every change in this file is to ensure our webapp still has the same form and function even on comically tiny screens like the iPhone 4
… mobile Add many CSS breakpoints to ensure elements continue to work on the smallest screens Add touch denial to volume bars based on vertical angle Make pill-scrollbar a global class Add primary and secondary color theming support to Cards, use this in the volume dropdown
SteveMicroNova
force-pushed
the
BottomedControls
branch
from
e9f39f9 to
6378d6b
Compare
What does this change intend to accomplish?
Move song controls, preset and add buttons to bottom of the screen on mobile
Adjust player page volume dropdown to more visibly include the underlying components, and limit height to make them scrollable without needing to scroll the whole page
Add many CSS breakpoints to ensure elements continue to work on the smallest screens
Home Page:
Before:
After:
Player Page:
Before:
After:
Checklist
./scripts/test